<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <script>
    window.onload=function () {
            let drawing = document.getElementById("drawing");
            if(drawing.getContext){
                let context = drawing.getContext("2d");
                context.strokeStyle="red";
                context.strokeRect(10,10,50,50);
                context.fillStyle="#0000ff";
                context.fillRect(10,10,50,50);
                let imageUrl = drawing.toDataURL("image/png");
                let image = document.createElement("img");
                image.src= imageUrl;
                document.body.appendChild(image);
            }
    }
    </script>
</head>
<body>
<canvas id="drawing" width="200" height="200">A drawing of something</canvas>
</body>
</html>
